<template>
  <el-table
    :data="tableData"
    :height="height"
    :max-height="maxHeight"
    :stripe="stripe"
    :border="border"
    :show-header="showHeader"
    :highlight-current-row="highlightCurrentRow"
    :empty-text="emptyText"
    @row-click="rowClick"
    @select="changeSelect"
    @select-all="changeSelectAll"
    @selection-change="changeSelection"
    @cell-click="cellClick"
  >
    <slot></slot>
  </el-table>
</template>

<script setup lang="ts" name="vTable">
import { ref, defineEmits, defineProps } from 'vue'
const props = defineProps({
  // 表格数据
  tableData: {
    type: Array,
    default: () => []
  },
  // Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。
  height: {
    type: [String, Number]
  },
  // 最大高度
  maxHeight: {
    type: [String, Number]
  },
  // 是否为斑马纹 table
  stripe: {
    type: Boolean,
    default: false
  },
  // 是否带有纵向边框
  border: {
    type: Boolean,
    default: true
  },
  // 是否显示表头
  showHeader: {
    type: Boolean,
    default: true
  },
  // 是是否单选高亮模式
  highlightCurrentRow: {
    type: Boolean,
    default: false
  },
  // 空数据文本
  emptyText: {
    type: String,
    default: '暂无数据'
  }
})
const emits = defineEmits(['row-click', 'select', 'select-all', 'selection-change'])
// 点击行
const rowClick = (row: any, column: any, event: any) => {
  // console.log(row, column, event)
}
// 勾选行
const changeSelect = (selection: any, row: any) => {
  // console.log(selection, row)
}
// 勾选全部行
const changeSelectAll = (selection: any) => {
  // console.log(selection)
}
// 勾选行变化
const changeSelection = (selection: any) => {
  emits('selection-change', selection)
  // console.log(selection)
}
// 单元格点击
const cellClick = (row: any, column: any, cell: any, event: any) => {
  // console.log(row, column, cell, event)
}
</script>

<style scoped>

</style>